<template>
    <div>
        <el-descriptions title="基本信息" :column="4">
            <el-descriptions-item label="项目名称" :span="4">{{ ruleForm.title }}</el-descriptions-item>
            <el-descriptions-item label="合同金额">{{ ruleForm.price }}</el-descriptions-item>
            <el-descriptions-item label="结算金额">{{ ruleForm.settlement }}</el-descriptions-item>
            <el-descriptions-item label="开工日期">{{ ruleForm.start_date }}</el-descriptions-item>
            <el-descriptions-item label="竣工日期">{{ ruleForm.end_date }}</el-descriptions-item>
            <el-descriptions-item label="合同工期">{{ ruleForm.work_period }}</el-descriptions-item>
            <el-descriptions-item label="已施工天">{{ ruleForm.build_date }}</el-descriptions-item>
            <el-descriptions-item label="剩余天　">{{ ruleForm.remaining_date }}</el-descriptions-item>
        </el-descriptions>
        <!-- <div class="segmented"><el-segmented class="mt10" v-model="value" :options="options" /></div> -->
        <el-tabs v-model="value" type="card" >
            <el-tab-pane v-for="item in options" :key="item" :label="item" :name="item">
                <div class="contents">
                    <component :is="edit" v-if="value == '项目信息'" />
                    <component :is="user" v-if="value == '项目人员'" />
                    <component :is="invoice" v-if="value == '甲方开票申请'" />
                    <component :is="prophase" v-if="value == '项目前期策划'" />
                    <component :is="scene" v-if="value == '现场施工管理'" />
                    <component :is="material" v-if="value == '材料管理'" />
                </div>
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import edit from './components/edit.vue'
import user from '../user/role.vue'
import invoice from './components/invoice.vue'
import prophase from './components/prophase.vue'
import scene from './components/scene.vue'
import material from './components/material.vue'

import { useRouter } from 'vue-router';
import http from '../../../util/request';
const id:any = ref(useRouter().currentRoute.value.params.id)
const value = ref('项目信息')

// const options = ['项目信息', '项目人员', '业主合同', '甲方开票申请', '项目前期策划', '动态调整项目策划', '内部经营协议', '施工组织计划','现场施工管理','材料管理','班组合同管理','劳务管理','零星材料管理','资料管理']
const options = ['项目信息', '通用申请报告', '业主合同', '项目人员', '质量管理', '安全管理', '进度管理','供应链管理','仓库管理','项目财务','项目资料',]
const ruleForm = ref<any>({})
const getData = () => {
    http.get('/project/'+id.value).then((response:any)=>{
        ruleForm.value = response.data.data
        ruleForm.value.build_date = onChangeDate(ruleForm.value.start_date,1)
        ruleForm.value.remaining_date = onChangeDate(ruleForm.value.end_date,2)
    })
}

const onChangeDate = (data:any,type:number) => {
    const _date:any = new Date(data);
    const currentDate:any = new Date(getCurrentDate())
    if(type == 1){
        const timeDiff = Math.abs(currentDate - _date);
        return Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
    }

    if(type == 2){
        const timeDiff = Math.abs(_date - currentDate);
        if(_date < currentDate){
            return '-'+Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
        }
        return Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
    }
    
}

function getCurrentDate() {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

onMounted(()=>{
    getData()
})
</script>
<style scoped>
.contents{margin:0px auto;width: 100%;height: calc(100vh - 35vh);overflow-y: scroll;padding-top: 12px;}
.segmented{width: 100%;overflow-x: scroll;}
::-webkit-scrollbar { height: 5px; /* 设置滚动条宽度 */ }
::-webkit-scrollbar-thumb { background-color: #e5e5e5; border-radius: 1px; /* 设置滑块圆角 */ }
::-webkit-scrollbar-track:hover { background-color: #f0f0f0; }
::-webkit-scrollbar-thumb:hover { background-color: #555; }
</style>
